<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-20 09:49:15
 * @LastEditors: your name
 * @LastEditTime: 2021-06-29 15:06:17
 * @Description: file content
-->
<template>
  <div>
    <el-button class="header-btn" type="text" @click="handleParamsAdd"
      >添加参数</el-button
    >
    <el-form :model="formData" ref="formData" label-width="120px">
      <el-table
        class="mt10"
        ref="table"
        :data="formData.params"
        style="width: 100%"
        row-key="id"
        stripe
        border
      >
        <el-table-column prop="name" label="参数名" width="160">
          <template slot-scope="scope">
            <el-form-item
              label-width="0px"
              :prop="'params.' + scope.$index + '.name'"
              :rules="[
                {
                  required: true,
                  message: '参数名不能为空',
                  trigger: 'change',
                },
                { validator: nameValidator, trigger: 'change' },
              ]"
            >
              <el-input
                v-model="scope.row.name"
                placeholder="请输入参数名"
                :maxlength="64"
                show-word-limit
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120">
          <template slot-scope="scope">
            <el-form-item
              label-width="0px"
              :prop="'params.' + scope.$index + '.type'"
              :rules="[
                { required: true, message: '类型不能为空', trigger: 'change' },
              ]"
            >
              <el-select
                style="width: 100%"
                v-model="scope.row.type"
                placeholder="请选择"
                @change="
                  handleTypeChange(
                    $event,
                    'params.' + scope.$index + '.value',
                    scope.row.value
                  )
                "
              >
                <el-option value="BUILT_IN" label="内置" />
                <el-option value="CUSTOM" label="自定义" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="参数值">
          <template slot="header">
            参数值
            <el-tooltip
              popper-class="custom-popper"
              content="内置类型参数值格式为：${value}"
              placement="top"
            >
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-form-item
              label-width="0px"
              :prop="'params.' + scope.$index + '.value'"
              :rules="[
                {
                  required: true,
                  message: '参数值不能为空',
                  trigger: 'change',
                },
                {
                  pattern:
                    scope.row.type === 'BUILT_IN'
                      ? VARIABLE_BUILT_IN_REG
                      : COMMON_REQUIRED_REG,
                  message: '请输入有效的参数值',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                v-model="scope.row.value"
                placeholder="请输入参数值"
                :maxlength="500"
                :show-word-limit="true"
              >
                <!-- scope.row.type !== 'BUILT_IN' -->
                <!-- <template v-if="scope.row.type === 'BUILT_IN'" slot="prepend">${</template>
                <template v-if="scope.row.type === 'BUILT_IN'" slot="append">}</template> -->
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="参数描述">
          <template slot-scope="scope">
            <el-form-item
              label-width="0px"
              :prop="'params.' + scope.$index + '.remark'"
            >
              <el-input
                v-model="scope.row.remark"
                placeholder="请输入参数描述"
                :maxlength="200"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="actions" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              class="link-danger"
              type="text"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { COMMON_REQUIRED_REG, VARIABLE_BUILT_IN_REG } from "@/utils/reg";
export default {
  data() {
    return {
      COMMON_REQUIRED_REG,
      VARIABLE_BUILT_IN_REG,
      formData: {
        params: [],
      },
    };
  },
  methods: {
    setData(data) {
      this.formData.params = data ? JSON.parse(data) : [];
      this.$nextTick(() => {
        this.$refs.formData.clearValidate();
      });
    },

    handleParamsAdd() {
      const id = String(Date.now());
      const item = {
        id,
        name: "",
        type: "",
        value: "",
        remark: "",
      };
      this.formData.params.push(item);
    },

    nameValidator(rule, value, callback) {
      const names = this.formData.params.map((item) => item.name);
      if (names.filter((name) => name === value).length > 1) {
        callback(new Error("参数已存在"));
      } else {
        callback();
      }
    },

    /**
     * 类型切换时触发值的校验 (仅有值时触发)
     * evt 类型的值
     * path 参数值的路径
     * value 参数值
     */
    handleTypeChange(evt, path, value) {
      if (value) {
        this.$nextTick(() => {
          this.$refs.formData.validateField(path);
        });
      }
    },

    handleDelete(record) {
      this.formData.params = this.formData.params.filter(
        (item) => item.id !== record.id
      );
    },

    async getData() {
      try {
        await this.$refs.formData.validate();
        const { params } = this.formData;
        return params.length > 0 ? JSON.stringify(params) : "";
      } catch (error) {
        console.log(error);
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table ::v-deep .el-form-item {
  margin-bottom: 0;
}

.header-btn.el-button--text {
  padding: 0;
  height: 18px;
  display: flex;
  align-items: center;
}
</style>
